<template>
    <div>
      <el-row :gutter="30">
        <!--用户数据-->
        <el-col :xs="15" :sm="18" :md="20" :lg="20" :xl="20" style="width: 1020px">
          <!--工具栏-->
          <div class="head-container">
            <div style="margin-left: 20px">
              <el-tag size="larger">您想进入报销请先查询身份证并进行验证</el-tag>
              <!-- 搜索 -->
              <el-input
                v-model="query.blurry"
                clearable
                size="small"
                placeholder="请先输入身份证号查询"
                style="width: 400px;margin-top: 10px"
                class="filter-item"
                @keyup.enter.native="searchSubmit"
              />
              <el-button style="margin-top: 10px" class="filter-item" size="mini" type="success" icon="el-icon-search" @click="searchSubmit">搜索</el-button>
              <el-button
                style="margin-top: 10px"
                v-if="crud.optShow.download"
                :loading="crud.downloadLoading"
                :disabled="!crud.data.length"
                class="filter-item"
                size="mini"
                type="warning"
                icon="el-icon-download"
                @click="crud.doExport"
              >导出</el-button>
            </div>
          </div>
          <!--表单渲染-->
          <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" title="报销详情信息录入" width="800px">
            <el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="160px">
              <el-form-item label="户内编号" prop="code">
                {{form.code}}
              </el-form-item>
              <el-form-item label="户主姓名" prop="name">
                {{form.name}}
              </el-form-item>
              <el-form-item label="身份证号" prop="card">
                {{form.card}}
              </el-form-item>
              <el-form-item label="性别" prop="sex">
                {{form.sex === 1 ? '男' : '女'}}
              </el-form-item>
              <el-form-item label="民族" prop="nation.name">
                {{form.nation.name}}
              </el-form-item>
              <el-form-item label="健康状态" prop="heath">
                {{form.heath === 0 ? '正常' : form.heath === 1 ? '健康' : '良好'}}
              </el-form-item>
              <el-form-item label="文化程度" prop="culture">
                {{form.culture}}
              </el-form-item>
              <el-form-item label="人员属性" prop="attr">
                {{form.attr}}
              </el-form-item>
              <el-form-item label="是否农业户口" prop="isfarm">
                {{form.isfarm === 1 ? '是' : '否'}}
              </el-form-item>
              <el-form-item label="婚姻情况" prop="wedding">
                {{form.wedding === 1 ? '已婚' : '未婚'}}
              </el-form-item>
              <el-form-item label="岗位" prop="position.name">
                {{form.position.name}}
              </el-form-item>
              <el-form-item label="电话号码" prop="telephone">
                {{form.telephone}}
              </el-form-item>
              <el-form-item label="农合证号" prop="farmid">
                {{form.farmid}}
              </el-form-item>
              <el-form-item label="是否农村户口" prop="iscountry">
                {{form.iscountry === 1 ? '是' : '否'}}
              </el-form-item>
              <el-form-item label="工作单位" prop="work">
                {{form.work}}
              </el-form-item>
              <el-form-item label="慢性病开始时间" prop="starttime">
                <template slot-scope="scope">
                  <span>{{ parseTime(scope.row.starttime) }}</span>
                </template>
              </el-form-item>
              <el-form-item label="慢性病结束时间" prop="endtime">
                <template slot-scope="scope">
                  <span>{{ parseTime(scope.row.endtime) }}</span>
                </template>
              </el-form-item>
              <el-form-item style="margin-left: 80px; width: 600px">
                <el-tag>当前报销时间 </el-tag><span style="margin-left: 20px">{{ parseTime(new Date()) }}</span>
              </el-form-item>
              <el-form-item style="margin-left: 80px; width: 600px">
                  <el-tag>慢性报销政策</el-tag>
              </el-form-item>
              <el-form-item style="margin-left: 90px; width: 600px">
                <template>
                  <el-table
                    :data="policys"
                    style="width: 100%"
                    >
                    <el-table-column
                      prop="year"
                      label="年度"
                      width="140">
                    </el-table-column>
                    <el-table-column
                      prop="deductible"
                      label="起付线"
                      width="140">
                    </el-table-column>
                    <el-table-column
                      prop="capping"
                      width="140"
                      label="封顶线">
                    </el-table-column>
                    <el-table-column
                      prop="rate.propertion"
                      width="140"
                      label="报销比例">
                    </el-table-column>
                  </el-table>
                </template>
              </el-form-item>
              <el-form-item style="width: 720px; margin-left: 80px">
                <span style="width: 300px">提示: 系统会按本年度2020年进行计算</span>
              </el-form-item>
              <el-form-item style="width: 120px; margin-left: 80px">
                <el-tag>您已报销金额: {{form.amount}}</el-tag>
                <el-tag>还可以报销的金额: {{cantAccount}}</el-tag>
                <el-tag>本次应实付金额: {{computedAccountamount}}</el-tag>
              </el-form-item>
              <div style="display: flex;justify-content: space-around;align-items: center; margin-left: 20px">
                <el-steps direction="vertical" :active="activeItemIndex + 1">
                  <el-step :title="itemName" v-for="(itemName,index) in accountItemName" :key="index"></el-step>
                </el-steps>
                <el-select
                  v-show="activeItemIndex===0"
                  @change="choiceVal"
                  v-model="form.currentSort" placeholder="请选择慢性病" style="width: 400px">
                  <el-option
                    v-for="item in sorts"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
                  <el-input style="width: 400px" v-model="form.nowamount" v-show="activeItemIndex===1" placeholder="请输入本次缴费费用"></el-input>
                  <el-select v-show="activeItemIndex===2" v-model="form.accountname" placeholder="请选择报销项目" style="width: 400px">
                    <el-option
                      v-for="item in accountnameOption"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
              </div>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="preStep">{{activeItemIndex===3?'取消':'上一步'}}</el-button>
                <el-button type="primary" @click="nextStep">{{activeItemIndex===2?'完成':'下一步'}}</el-button>
              </span>
          </el-dialog>

          <!--表格渲染-->
          <el-table ref="table" v-show="isShowTable" v-loading="crud.loading" :data="crud.data" style="width: 100%"  @selection-change="crud.selectionChangeHandler">
            <el-table-column :selectable="checkboxT" type="selection" width="60" />
            <el-table-column v-if="columns.visible('code')" :show-overflow-tooltip="true" prop="code" label="户内编号" align="center"/>
            <el-table-column v-if="columns.visible('name')" :show-overflow-tooltip="true" prop="name" label="户主姓名" align="center"/>
            <el-table-column v-if="columns.visible('card')" :show-overflow-tooltip="true" prop="card" label="身份证号" width="160"align="center"/>
            <el-table-column v-if="columns.visible('sortid')" :show-overflow-tooltip="true" prop="csort.name" label="慢性病" width="130" align="center"/>
            <el-table-column v-if="columns.visible('sex')" :show-overflow-tooltip="true" prop="sex" label="性别" :formatter="formatSex" align="center"/>
            <el-table-column v-if="columns.visible('nationid')" :show-overflow-tooltip="true" prop="nation.name" label="民族" align="center"/>
            <el-table-column v-if="columns.visible('heath')" :show-overflow-tooltip="true" prop="heath" label="健康状态" :formatter="formatHeath" align="center"/>
            <el-table-column v-if="columns.visible('isconsult')" :show-overflow-tooltip="true" prop="isconsult" label="是否参合" :formatter="formatIsconsult" align="center"/>
            <el-table-column v-if="columns.visible('culture')" :show-overflow-tooltip="true" prop="culture" label="文化程度" align="center"/>
            <el-table-column v-if="columns.visible('attr')" :show-overflow-tooltip="true" prop="attr" label="人员属性" align="center"/>
            <el-table-column v-if="columns.visible('isfarm')" :show-overflow-tooltip="true" prop="isfarm" label="是否农业户口" width="120" :formatter="formatIsfarm" align="center"/>
            <el-table-column v-if="columns.visible('wedding')" :show-overflow-tooltip="true" prop="wedding" label="婚姻情况" :formatter="formatWedding" align="center"/>
            <el-table-column v-if="columns.visible('positionid')" :show-overflow-tooltip="true" prop="position.name" label="岗位" width="120" align="center" />
            <el-table-column v-if="columns.visible('telephone')" :show-overflow-tooltip="true" prop="telephone" label="电话号码" width="160" align="center"/>
            <el-table-column v-if="columns.visible('farmid')" :show-overflow-tooltip="true" prop="farmid" label="农合证号" align="center"/>
            <el-table-column v-if="columns.visible('iscountry')" :show-overflow-tooltip="true" prop="iscountry" label="是否农村户口" width="120" :formatter="formatIscountry" align="center"/>
            <el-table-column v-if="columns.visible('work')" :show-overflow-tooltip="true" prop="work" label="工作单位" />
            <el-table-column :formatter="dateFormat" v-if="columns.visible('starttime')" :show-overflow-tooltip="true" prop="starttime" label="慢性开始时间" width="120" align="center"/>
            <el-table-column :formatter="dateFormat" v-if="columns.visible('endtime')" :show-overflow-tooltip="true" prop="endtime" label="慢性结束时间" width="120" align="center"/>
            <el-table-column v-if="columns.visible('homeFile.realName')" :show-overflow-tooltip="true" prop="homeFile.realName" label="附件" width="200"/>
            <el-table-column
              v-if="columns.visible('card')"
              v-permission="['admin','farmer:edit','farmer:del']"
              label="操作"
              width="125"
              align="center"
              fixed="right"
              >
              <template slot-scope="scope">
                <recordOperation
                  :data="scope.row"
                  :permission="permission"
                  v-if="scope.row.isconsult === 1"
                />
                <el-button v-if="scope.row.isconsult === 0" @click="openVn(scope.row)">您还没有参合哦</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!--分页组件-->
          <pagination v-show="isShowTable" />
        </el-col>
        <el-col :span="12">
          <img style="margin-left: 400px" v-show="!isShowTable" :src="errGif" width="313" height="428" alt="Girl has dropped her ice cream.">
        </el-col>
      </el-row>
    </div>
</template>

<script>
  import errGif from '@/assets/401_images/401.gif'
  import crudHome from '@/api/vocation/home'
  import { getNations } from "@/api/common/nation";
  import { getSorts} from "@/api/system/sort";
  import CRUD, { presenter, header, form, crud } from '@crud/crud'
  import rrOperation from '@crud/RR.operation'
  import crudOperation from '@crud/CRUD.operation'
  import udOperation from '@crud/UD.operation'
  import recordOperation from '@crud/Record.operation'
  import pagination from '@crud/Pagination'
  import Treeselect from '@riophae/vue-treeselect'
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'
  import {getPositions} from "@/api/common/position";
  import moment from 'moment'
  import { getPolicys } from '../../../../api/system/policy'

  // crud交由presenter持有
  const defaultCrud = CRUD({ title: '报销', url: 'api/home', crudMethod: { ...crudHome }})
  // 注意是数组形式的关联属性 否则无法识别数组属性中id
  const defaultForm = {id: null, code: null, name: null, card: null, sex: null, nation: {id: null}, heath: null, isconsult: null, culture: null, attr: null, isfarm: null, wedding: null, position: {id: null}, telephone: null, farmid: null, iscountry: null, work: null , paytype: null, csort: {id: null} , starttime: null, endtime: null, homeFile: [], accountname: null, nowamount: null}
  export default {
    components: { Treeselect, crudOperation, rrOperation, udOperation, pagination, recordOperation },
    mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
    data() {
      return {
        cantAccount: '',
        computedAccountamount: '',
        policys: [],
        currentSort: '',
        accountItemName: [
          '请选择慢性病',
          '本次缴费费用',
          '报销项目',
        ],
        activeItemIndex: 0,
        isShowRecordView: false,
        errGif: errGif + '?' + +new Date(),
        ewizardClap: 'https://wpimg.wallstcn.com/007ef517-bafd-4066-aae4-6883632d9646',
        isShowTable: false,
        fileList: [],
        sorts: [],
        nations: [],
        positions: [],
        options: [{
          value: '1',
          label: '男'
        }, {
          value: '0',
          label: '女'
        }],
        farmOptions: [{
          value: '1',
          label: '是'
        }, {
          value: '0',
          label: '否'
        }],
        iscountryOptions: [{
          value: '1',
          label: '是'
        }, {
          value: '0',
          label: '否'
        }],
        weddingOptions: [{
          value: '1',
          label: '已婚'
        }, {
          value: '0',
          label: '未婚'
        }],
        heathOptions: [{
          value: '0',
          label: '健康'
        }, {
          value: '1',
          label: '正常'
        }, {
          value: '2',
          label: '良好'
        }],
        accountnameOption: [{
          value: '手术报销',
          label: '手术报销'
        }, {
          value: '药品报销',
          label: '药品报销'
        }, {
          value: '住院报销',
          label: '住院报销'
        }],
        value: '',
        height: document.documentElement.clientHeight - 180 + 'px;',
        defaultProps: { children: 'children', label: 'group' },
        permission: {
          add: ['admin', 'vocation', 'current', 'home:add'],
          edit: ['admin', 'vocation', 'current', 'home:edit'],
          del: ['admin', 'vocation', 'current', 'home:del']
        },
        rules: {
          code: [
            { required: true, message: '户内编号', trigger: 'blur' },
            { min: 1, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
          ],
          name: [
            { required: true, message: '户主姓名', trigger: 'blur' },
            { min: 1, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
          ],
          card: [
            { required: true, message: '身份证号', trigger: 'blur' },
            { min: 1, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
          ],
          culture: [
            { required: true, message: '文化程度', trigger: 'blur' },
            { min: 1, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
          ],
          attr: [
            { required: true, message: '人员属性', trigger: 'blur' },
            { min: 1, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
          ],
          telephone: [
            { required: true, message: '电话号码', trigger: 'blur' },
            { min: 1, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
          ],
          farmid: [
            { required: true, message: '农合证号', trigger: 'blur' },
            { min: 1, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
          ],
          work: [
            { required: true, message: '工作单位', trigger: 'blur' },
            { min: 1, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
          ],
        }
      }
    },
    created() {
      this.$nextTick(() => {
        this.crud.toQuery()
        this.getSorts()
        this.getNations()
        this.getPositions()
        this.getPolicys()
        this.crud.msg.add = '新增成功'
      })
    },
    mounted: function() {
      const that = this
      window.onresize = function temp() {
        that.height = document.documentElement.clientHeight - 180 + 'px;'
      }
    },
    methods: {
      [CRUD.HOOK.afterAddError](crud) {
        this.afterErrorMethod(crud)
      },
      [CRUD.HOOK.afterEditError](crud) {
        this.afterErrorMethod(crud)
      },
      afterErrorMethod(crud) {
      },
      deleteTag(value) {
      },
      // 新增与编辑前做的操作
      [CRUD.HOOK.afterToCU](crud, form) {
        form.enabled = form.enabled.toString()
      },
      // 打开编辑弹窗前做的操作
      [CRUD.HOOK.beforeToEdit](crud, form) {
      },
      // 提交前做的操作
      [CRUD.HOOK.afterValidateCU](crud) {
      },
      // 改变状态
      changeEnabled(data, val) {
        this.$confirm('此操作将 ' + data.group + ', 是否继续？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          crudHome.edit(data).then(res => {
            this.crud.notify('成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
          }).catch(() => {
            data.enabled = !data.enabled
          })
        }).catch(() => {
          data.enabled = !data.enabled
        })
      },
      checkboxT(row, rowIndex) {
        return row.id !== this.rowIndex
      },
      formatSex(row, column) {
        return row.sex === 1 ? '男' : '女'
      },
      formatHeath(row, column) {
        return row.heath === 0 ? '良好' : row.heath === 1 ? '健康' : '正常'
      },
      formatIsfarm(row, column) {
        return row.isfarm === 0 ? '否' : '是'
      },
      formatWedding(row, column) {
        return row.wedding === 0 ? '未婚' : '已婚'
      },
      formatIscountry(row, column) {
        return row.iscountry === 0 ? '否' : '是'
      },
      formatIsconsult(row, column) {
        return row.isconsult === 1 ? '是' : '否'
      },
      getNations() {
        getNations().then(res => {
          this.nations = res
        })
      },
      getPositions() {
        getPositions().then(res => {
          this.positions = res
        })
      },
      getSorts() {
        getSorts().then(res => {
          this.sorts = res
        })
      },
      // 上传
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      //日期格式化
      dateFormat:function(row,column){
        var date = row[column.property];
        if(date === undefined){return ''};
        return moment(date).format("YYYY-MM-DD")
      },
      searchSubmit() {
        this.crud.toQuery()
        this.isShowTable = true
      },
      openVn(data) {
        const h = this.$createElement;
        this.$message({
          message: h('p', null, [
            h('span', null, '我很抱歉! 尊敬的  '),
            h('i', { style: 'color: teal' }, data.name),
            h('span', null, '  您还没有参合哦! ')
          ]),
          type: 'warning'
        });
      },
      preStep() {
        if (this.activeItemIndex === 0) {
          return;
        } else if (this.activeItemIndex === 10) {
          //关闭对话框
          this.dialogVisible = false;
          return;
        }
        this.activeItemIndex--;
      },
      nextStep() {
        if (this.activeItemIndex === 1) {
          console.log(this.policys[3].capping)
          console.log('已报销金额: ' + this.form.amount)

          this.cantAccount =  parseInt(this.policys[3].capping) - parseInt(this.form.amount) > 0 ? parseInt(this.policys[3].capping) - parseInt(this.form.amount) : 0
          console.log('还可以报销的金额: ' + this.cantAccount)

          if (this.cantAccount === 0) {
            this.computedAccountamount = this.form.nowamount
            this.$message.warning('您在本年度可报销金额已用完,本年度慢性政策未失效之前系统按原价收费!')
          } else {
            this.computedAccountamount = parseInt(this.form.nowamount) - this.cantAccount
            console.log('本次应实付金额: ' + this.computedAccountamount)
            console.log('到目前总共报销了: ' + (parseInt(this.cantAccount) +  parseInt(this.form.amount)))

          }

        }
        if (this.activeItemIndex === 2) {
          //更新每次已报销的金额
          this.form.amount = parseInt(this.cantAccount) +  parseInt(this.form.amount)
          console.log('更新每次已报销的金额: ' + (parseInt(this.cantAccount) +  parseInt(this.form.amount)))
            this.crud.submitCU()
            this.activeItemIndex = 0
        }
        this.activeItemIndex++;
      },
      choiceVal(val) {
        this.currentSort = val
        console.log(this.currentSort)
        //this.form.csort.id可以获取当前form对应的csort.id
        if (this.currentSort !== this.form.csort.id) {
          this.$message.warning('当前要报销的慢性病与慢性报销病症不一致!')
        }
      },
      getPolicys() {
        getPolicys().then(res => {
          this.policys = res
        })
      }
    },
  }
</script>

<style lang="scss" scoped>
  .errPage-container {
    width: 800px;
    max-width: 100%;
    margin: 100px auto;
    .pan-back-btn {
      background: #008489;
      color: #fff;
      border: none!important;
    }
    .pan-gif {
      margin: 0 auto;
      display: block;
    }
    .pan-img {
      display: block;
      margin: 0 auto;
      width: 100%;
    }
    .text-jumbo {
      font-size: 60px;
      font-weight: 700;
      color: #484848;
    }
    .list-unstyled {
      font-size: 14px;
      li {
        padding-bottom: 5px;
      }
      a {
        color: #008489;
        text-decoration: none;
        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
</style>

